<template>
  <div class="wrapper" :style="{height:h,width:w}">
    <swiper :options="swiperOption" ref="mySwiper" style="height:100%;width:100%;">
      <swiper-slide>
        <slot></slot>
      </swiper-slide>
      <!-- 根据情况引入控件 -->
      <div class="swiper-scrollbar"></div>
    </swiper>
  </div>
</template>

<script>
/**
 * @list 图片数组
 * @w 宽度，默认 100%
 * @h 高度，默认 600px
 * @cover 图片缩放模式，默认true,按最大显示
 */
export default {
  name: "swiper-page-scroll",
  props:{
    w:{
      type:String,
      default:'100%',
    },
    h:{
      type:String,
      default:'600px'
    },
  },
  data() {
    return {
      swiperOption: {
        direction:'vertical',
        slidesPerView: "auto",
        freeMode:true,
        scrollbar: {
          el: ".swiper-scrollbar",
        },
        mousewheel: true,
      }
    };
  },
};
</script>

<style lang="scss" scoped>
.wrapper{
  max-width:100vw;
  max-height:100vh;
}

.swiper-slide {
  height:auto;
}
</style>
